<template>
  <div class="ticketRemind">
    <!-- 查询区域 -->
    <!-- <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="提示状态">
             <el-radio  v-model="state" label="1"
        >启动</el-radio>
      <el-radio  v-model="state" label="0"
        >失效</el-radio
      >
          </el-form-item>
            <el-form-item label="提示状态">
            </el-form-item>
      <el-form-item label="">
          <el-button type="primary" size="mini" @click="getselectTicketRemindList()"
        >搜索</el-button
      >
      <el-button type="primary" size="mini" @click="addDialogVisible = true"
        >添加</el-button>
      </el-form-item>
    
      </el-form->
      </el-form> -->

    <el-form ref="form" :model="form" size="mini" style="display:flex">
      <el-form-item label="提示状态" style="display:flex;margin:0 20px 0 0">
        <el-radio v-model="state" label="1">启动</el-radio>
        <el-radio v-model="state" label="0">失效</el-radio>
      </el-form-item>
      <el-form-item label="提示标题" style="display:flex;margin:0 20px 0 0">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="执行开始" style="display:flex;margin:0 20px 0 0">
        <el-date-picker :value-format="format" v-model="form.time" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="执行结束" style="display:flex;margin:0 20px 0 0">
        <el-date-picker :value-format="format" v-model="form.timeBack" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
      </el-form-item>
    </el-form>
    <div style="margin:20px 0 20px 85%">
      <el-button type="primary" size="mini" @click="seachBtn">搜索</el-button>
      <el-button type="primary" size="mini" @click="addDialogadd">添加</el-button>
    </div>

    <!-- 列表区域 -->
    <el-table :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }" id="tableTop" :data="TicketRemindList" border stripe size="mini">
      <el-table-column label="提示类型" prop="remindType"></el-table-column>
      <el-table-column label="提示标题" prop="remindName"></el-table-column>
      <el-table-column label="提示内容" prop="remindDesc"></el-table-column>
      <el-table-column label="航空公司" prop="flight"></el-table-column>
      <el-table-column label="提示状态" prop="state"> </el-table-column>
      <el-table-column label="修改员工" prop="updateEmployee"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>

      <el-table-column label="执行开始" prop="orderDateStart"></el-table-column>
      <el-table-column label="执行结束" prop="orderDateEnd"></el-table-column>
      <el-table-column label="起飞开始时间" prop="flyDateStart"></el-table-column>
      <el-table-column label="起飞结束时间" prop="flyDateEnd"></el-table-column>
      <el-table-column label="适用航线" prop="fitTrip"></el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="geteditremind(scope.row)">
            {{ scope.row.state == "失效" ? "启用" : "停用" }}
          </el-button>
          <el-button type="primary" size="mini" @click="delremind(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal">
    </el-pagination>

    <!-- 新增弹窗 -->
    <el-dialog title="添加提示" :visible.sync="addDialogVisible" width="70%" center>
      <div style="margin: auto">
        <el-form :model="addmarked" ref="addmarked" :rules="rules" inline size="mini">
          <el-form-item label="提示语类型" prop="remindType">
            <el-select size="mini" v-model="addmarked.remindType" placeholder="请选择" clearable>
              <el-option v-for="item in videotypeList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提示语名称" prop="reindName">
            <el-input size="mini" v-model="addmarked.reindName"></el-input>
          </el-form-item>

          <el-form-item label="提示语详细" prop="remindDesc">
            <el-input style="width: 400px" size="mini" type="textarea" :autosize="{ maxRows: 4 }"
              v-model="addmarked.remindDesc"></el-input>
          </el-form-item>
          <el-form-item label="预定时间" prop="markeddate1">
            <el-date-picker :value-format="format" v-model="addmarked.orderDateStart" type="date" placeholder="选择日期">
            </el-date-picker>-
            <el-date-picker :value-format="format" v-model="addmarked.orderDateEnd" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="起飞时间" prop="flyDateStart">
            <el-date-picker :value-format="format" v-model="addmarked.flyDateStart" type="date" placeholder="选择日期">
            </el-date-picker>-
            <el-date-picker :value-format="format" v-model="addmarked.flyDateEnd" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="适用航线">
            <el-input size="mini" v-model="addmarked.fitTrip"></el-input>
          </el-form-item>
          <el-form-item label="航空公司：" prop="airlineList">
            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
            <el-checkbox-group size="mini" style="font-size: 12px" v-model="addmarked.airlineList">
              <el-checkbox size="mini" v-for="(item, i) in airportLists" :key="i" :label="item.airlinerId">
                {{ item.airlinerShorter }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <div class="cancelbtn">
        <el-button @click="addDialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" size="mini" @click="submitForm('addmarked')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog title="确认删除" :visible.sync="delDialogVisible" :close-on-click-modal="false" width="30%" center>
      <span>确认删除此条提示信息吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getdelRemove()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 全选
         isIndeterminate: false,
  checkAll: false,
        form: {
          name: "",
          timeBack: "",
          time: ""
        },

        format: "yyyy-MM-dd",
        // 表单验证
        rules: {
          remindType: [{
            required: true,
            message: "请选择提示语类型",
            trigger: "change"
          }, ],
          reindName: [{
            required: true,
            message: "请输入提示语名称",
            trigger: "blur"
          }, ],
          remindDesc: [{
            required: true,
            message: "请输入提示语详细",
            trigger: "blur"
          }, ],

          airlineList: [{
            type: "array",
            required: true,
            message: "请至少选择一个机场",
            trigger: "change",
          }, ],
        },

        //分页
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        // 新增入参
        addmarked: {
          remindType: "", //提示语类型
          reindName: "", //提示语名称
          remindDesc: "", //提示语详细
          orderDateStart: "", //预定时间前
          orderDateStart: "", //预定时间后
          flyDateStart: "", //起飞时间前
          flyDateEnd: "", //起飞时间后
          dateend: "", //提示语类型
          fitTrip: "", //航线
          airlineList: [], //机场
        },
        // 删除id
        delid: "",

        // 所处状态
        state: "1",
        //列表数据
        TicketRemindList: [],
        // 新增弹窗显示
        addDialogVisible: false,
        // 删除弹窗
        delDialogVisible: false,
        // 提示语类型、
        videotypeList: [{
            value: "1",
            label: "首页提醒",
          },
          {
            value: "2",
            label: "航司提醒",
          },
          {
            value: "3",
            label: "临近起飞提醒",
          },
          {
            value: "4",
            label: "华夏通程提醒",
          },
          {
            value: "5",
            label: "退票提醒",
          },
           {
            value: "6",
            label: "特别提醒",
          },
        ],
        // 航司列表
        airportLists: [],
      };
    },
    watch: {},

    methods: {
      // 全选
       handleCheckAllChange(val) {
      const all = this.airportLists.map(item => {
        return item.airlinerId
      })
      this.addmarked.airlineList = val ? all : []
      this.isIndeterminate = false
      console.log(this.addmarked.airlineList)
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.airportLists.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.airportLists.length
    },
      // 添加按钮
      addDialogadd() {
        this.addDialogVisible = true
      },
      //新增点击事件
      submitForm(addmarked) {
        this.$refs[addmarked].validate((valid) => {
          if (valid) {
            this.getaddTicketRemind();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      //分页
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getselectTicketRemindList();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);

        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getselectTicketRemindList();
        // orders = res.data;
      },
      search() {
        localStorage.setItem("pageNum", this.currentPage);
        localStorage.setItem("pageSize", 10);
        this.getselectTicketRemindList();
      },
      //提醒信息列表geteditremind
      getselectTicketRemindList() {
        this.$axios
          .getselectTicketRemindList({
            state: this.state,
            name: this.form.name,
            time: this.form.time,
            timeBack: this.form.timeBack
          })
          .then((res) => {
            console.log(res);
            // debugger
            if (res.code == "200") {
              let TicketRemindList = JSON.parse(JSON.stringify(res.data));
              this.TicketRemindList = TicketRemindList;
              this.pageTotal = res.total;
            }
          });
      },
      screen(row) {
        // console.log(row);
        // let flight1 = []

        //  row.filter(items=>{
        //     let flight = items.flight.split("|");
        //     flight1 = flight.slice(1, flight.length);
        //    return items.flight == flight1
        // })
        // console.log(row);
        // let row2 = this.airportLists.filter(itemz=>{

        // })

      },
      // 航司列表接口
      getairportList() {
        localStorage.removeItem("pageNum");
        localStorage.removeItem("pageSize");
        this.$axios.getairportList({}).then((res) => {
          console.log(res);
          localStorage.setItem("pageSize", 10);
          localStorage.setItem("pageNum", 1);
          if (res.code == "200") {
            // this.airportLists = res.data;
            // console.log(this.airportLists)
            let list = JSON.parse(JSON.stringify(res.data));
            this.airportLists = list.filter((item) => {
              if (item.airliner != null && item.airlinerShorter != null) {
                return item;
              } else {}
            });
          }
        });
      },
        seachBtn(){
            localStorage.setItem("pageSize", 10);
                localStorage.setItem("pageNum", 1);
          this.getselectTicketRemindList()
        },
      //修改操作
      geteditremind(row) {
        console.log(row);
        localStorage.setItem("isToken", true);
        this.$axios
          .geteditremind({
            id: row.id,
            state: row.state == "失效" ? "1" : "0",
          })
          .then((res) => {
            console.log(res);
            // debugger
            if (res.code == "200") {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.getselectTicketRemindList();

            }
          });
      },
      //新增提醒消息
      getaddTicketRemind() {
        localStorage.setItem("isToken", true);
        this.$axios
          .getaddTicketRemind({
            remindType: this.addmarked.remindType, //提示语类型
            reindName: this.addmarked.reindName, //提示语名称
            remindDesc: this.addmarked.remindDesc, //提示语详细
            orderDateStart: this.addmarked.orderDateStart, //预定时间前
            orderDateEnd: this.addmarked.orderDateEnd, //预定时间后
            flyDateStart: this.addmarked.flyDateStart, //起飞时间前
            flyDateEnd: this.addmarked.flyDateEnd, //起飞时间后
            fitTrip: this.addmarked.fitTrip, //适用航线
            airlineList: this.addmarked.airlineList, //适用航线
          })
          .then((res) => {
            console.log(res);
            // debugger
            if (res.code == "200") {
              this.addDialogVisible = false;
              this.$message({
                message: "新增成功",
                type: "success",
              });
            }
            
          });
      },
      // 删除提醒点击事件
      delremind(row) {
        console.log(row);
        this.delDialogVisible = true;
        this.delid = row.id;
      },
      //删除提醒消息
      getdelRemove() {
        this.$axios
          .getdelRemove({
            id: String(this.delid),
          })
          .then((res) => {
            console.log(res);
            // debugger
            if (res.code == "200") {
              this.getselectTicketRemindList();
              this.delDialogVisible = false;
              this.$message({
                message: "删除成功",
                type: "success",
              });
            }
          });
      },
    },

    mounted() {
      // 航司
      this.getairportList();
      // 查询接口
      this.getselectTicketRemindList();
    },
  };
</script>
<style scoped>
  .cancelbtn {
    margin-left: 35%;
  }

  .ticketRemind {
    margin: 20px;
  }
</style>